<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js"> <!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <include file="Public:meta"/>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="page-header-fixed">
<include file="Public:header"/>
<!-- BEGIN CONTAINER -->
<div class="page-container">
    <include file="Public:sidebar"/>
    <!-- BEGIN PAGE -->
    <div class="page-content">
        <!-- BEGIN PAGE CONTAINER-->
        <div class="container-fluid">
            <!-- BEGIN PAGE HEADER-->
            <div class="row-fluid">
                <!-- begin BCN -->
                <div class="row-fluid">
                    <div class="span12"><ul class="breadcrumb"><li><i class="icon-home"></i><a onfocus="blurLink(this);" href="{:U('Index/index')}">首页</a>&nbsp;<span class="icon-angle-right"></span>&nbsp;</li><li><a onfocus="blurLink(this);" href="{:U(CONTROLLER_NAME . '/index', 'kept=1')}">{$ParentPageName|default="未命名"}</a>&nbsp;<span class="icon-angle-right"></span>&nbsp;</li><li>{$PageName|default="未命名"}</li></ul></div>
                </div>
                <!-- end BCN -->
            </div>
            <!-- END PAGE HEADER-->
            <!-- BEGIN PAGE CONTENT-->
            <div class="row-fluid white">
                <div class="span12">
                    <form action="{:U('Rule/index')}" method="post" class="form-horizontal" enctype="multipart/form-data">
                        <notempty name="list">
                            <volist name="list" id="vo" key="key">
                                <div class="rule">
                                    <input type="hidden" name="time_id[]" value="{$vo.id}">
                                    <div class="control-group">
                                        <label class="control-label"><span>时间段<font>{$key}</font>：</span></label>
                                        <div class="controls">
                                            <input type="text" class="m-wrap start" name="time[]" readonly="readonly" value="{$vo.time}"/>
                                            <button class="btn red remove" type="button">删除</button>
                                        </div>
                                    </div>
                                </div>
                            </volist>
                        <else/>
                            <div class="rule">
                                <div class="control-group">
                                    <label class="control-label"><span>时间段<font>1</font>：</span></label>
                                    <div class="controls">
                                        <input type="text" class="m-wrap start" name="time[]" readonly="readonly" value=""/>
                                        <button class="btn red remove" type="button">删除</button>
                                    </div>
                                </div>
                            </div>
                        </notempty>
                        <div class="control-group">
                            <div class="controls">
                                <button id="add" type="button" class="btn green">添加 <i class="icon-plus"></i></button>
                                <span class="help-inline">请按0-24点的顺序选择时间段</span>
                            </div>
                        </div>
                        <input type="hidden" name="delIds" value="">
                        <div class="form-button">
                            <button type="submit" class="btn blue">保存数据 <i class="icon-save"></i></button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- END PAGE CONTENT-->
        </div>
        <!-- END PAGE CONTAINER-->
    </div>
    <!-- END PAGE -->
</div>
<!-- END CONTAINER -->
<div id=hide style="display:none">
    <div class="rule" style="width:auto;height:auto;margin-top:5px;">
        <div class="control-group">
            <label class="control-label"><span>时间段<font>$</font>：</span></label>
            <div class="controls">
                <input type="text" class="m-wrap start" readonly="readonly" name="time[]" value=""/>
                <button class="btn red remove" type="button">删除</button>
            </div>
        </div>
    </div>
</div>
<include file="Public:footer"/>
<script type="text/javascript" src="__TMPL__Public/plugins/bootstrap-fileupload/bootstrap-fileupload.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function () {
    });
</script>
<script type="text/javascript" src="__TMPL__Public/scripts/laydate/laydate.js"></script>
<script type="text/javascript">
    $(function(){
        $('#add').on('click',function(){
            addRule();
        });
        $('body').on('click','.remove',function(){
            var num = $('form .rule').size();
            if(num <= 1){
                custom_alert('至少保留一个时间段');
                return false;
            }
            var that = $(this);
            var delId = that.closest('.rule').find('input[name^=time_id]').val();
            if(delId){
                custom_confirm('确定删除该时间段？',function(){
                    var value = $('input[name=delIds]').val();
                    if(value){
                        value = value+','+delId;
                    }else{
                        value = delId;
                    }
                    $('input[name=delIds]').attr({'value':value});
                    that.closest('.rule').remove();
                    delRule();
                });
            }else{
                that.closest('.rule').remove();
                delRule();
            }
        });
        initTime();
    });
    function initTime(){
        //初始化唤起时间控件的事件
        lay('form .start').each(function(){
            laydate.render({
                elem: this
                ,type:'time'
                ,format:'HH:mm'
                ,trigger: 'click'
            });
        });
    }
    /*删除规则*/
    function delRule(){
        var num = 1;
        $('form div.rule').each(function(){
            $(this).find('font').html(num);
            num++;
        });
        initTime();
    }
    /*添加规则*/
    function addRule(){
        var num = $('form div.rule').size();
        var next = parseInt(num) + 1;
        var html = $('#hide').html();
        html = html.replace('$',next);
        $('form div.rule:last').after(html);
        initTime();
    }
    laydate.render({
        elem: '#time'
        ,type: 'time'
        ,format:'HH:mm'
    });
</script>

</body>
<!-- END BODY -->